<template>
	<view class="fullPage p30">
		<view class="container pt200 border-r1 bf shadow">
			<!-- 仓门正在打开中 -->
			<view class="flex_aj column" v-if="!socketInfo.state && socketInfo.state != 0">
				<view class="jiazai mb30">
					<image src="/static/ic_jiazai.png" mode="widthFix" style="width: 134upx;height: 134upx;"></image>
				</view>

				<view>仓门正在开启，请稍等</view>
			</view>
			<!-- 更换或归还电池 start -->

			<view v-if="socketInfo.openType == 2">
				<!-- 仓门已打开 -->
				<view class="flex_aj column" v-if="socketInfo.state == 1">
					<view class="flex_aj w230 h230 mb20 border-r50p b-green">
						<image src="/static/huandian.png" mode="widthFix" style="width: 134upx;height: 100upx;"></image>
					</view>
					<view class="mb30">
						<text class="ft48">{{ socketInfo.cabinets }}</text>
						号仓门
					</view>
					<view class="mb20 lh40 tac">
						<view class="">请将电池放入到指定仓门中并接入电源线</view>
						<view class="">连接电源线后再关闭仓门</view>
					</view>
					<!-- <view class="warning">电池尚未取出？点这里</view> -->
				</view>

				<!-- 电池归还成功 -->

				<view class="pw100 flex_aj column" v-if="socketInfo.state == 2">
					<view class="mb30">
						<icon type="success" size="93"></icon>
					</view>

					<view class="mb80 ft36">电池已归还</view>
					<!-- <view class="pw100 plr60 ">
						<u-button type="primary" shape="circle" @click="routerLink({ path: '/pages/user/myOrder/rentEleDetail', query: { orderNo } })">查看订单</u-button>
					</view> -->
				</view>

				<!-- 电池归还失败 -->

				<view class="pw100 flex_aj column" v-if="socketInfo.state == 3 || socketInfo.state == 4">
					<view class="flex_aj w230 h230 mb30 border-r50p b-danger">
						<u-icon name="close" color="#fff" size="100"></u-icon>
					</view>

					<view class="mb20 ft36">归还失败</view>
					<view class="mb80 lh40 tac" v-show="socketInfo.state == 3">
						<view class="">当前放入电池非原有电池</view>
						<view class="">请取出后重新放入</view>
					</view>
					<view class="mb80 lh40 tac" v-show="socketInfo.state == 4">
						<view class="">未识别到电池放入</view>
						<view class="">查看电源线是否插好</view>
					</view>
					<view class="pw100 plr60 ">
						<u-button type="primary" shape="circle" @click="restartOpen">重新打开仓门</u-button>
					</view>
				</view>
			</view>

			<!-- 更换或归还电池 end -->

			<!-- 获取电池 start -->
			<view v-if="socketInfo.openType == 1">
				<!-- 仓门打开中，仓门打开 -->
				<view class="flex_aj column" v-if="socketInfo.state == 1">
					<view class="flex_aj w230 h230 mb20 border-r50p b-green">
						<image src="/static/huandian.png" mode="widthFix" style="width: 134upx;height: 100upx;"></image>
					</view>
					<view class="mb30">
						<text class="ft48">{{ socketInfo.cabinets }}</text>
						号仓门
					</view>
					<view class="mb20">请取回您的电池，取出后请关闭仓门</view>
					<!-- <view class="warning">电池尚未取出？点这里</view> -->
				</view>

				<!-- 电池已取出，请关闭仓门 -->

				<view class="pw100 flex_aj column" v-if="socketInfo.state == 2">
					<view class="mb30">
						<icon type="success" size="93"></icon>
					</view>

					<view class="mb80 ft36">电池已取出,请关闭仓门</view>
					<view class="pw100 plr60 ">
						<u-button type="primary" shape="circle"
							@click="routerLink({ path: '/pages/user/myOrder/rentEleDetail', query: { orderNo } })">查看订单
						</u-button>
					</view>
				</view>

				<!-- 电池已取出，请关闭仓门 -->

				<view class="pw100 flex_aj column" v-if="socketInfo.state == 3">
					<view class="mb30">
						<icon type="warn" size="93" color="#FF7F00"></icon>
					</view>

					<view class="mb80 ft36">您的电池尚未取走</view>
					<view class="flex_a pw100 plr30 ">
						<view class="flex1 mr30">
							<u-button type="primary" plain shape="circle" @click="restartOpen">重新打开仓门</u-button>
						</view>
						<view class="flex1">
							<u-button type="primary" shape="circle" @click="back(1)">下次再取</u-button>
						</view>
					</view>
				</view>
			</view>
			<!-- 获取电池 end -->
		</view>
	</view>
</template>

<script>
	import rentEleProcess from './mixins/rentEleProcess.js'
	export default {
		name: 'batteryChange',
		mixins: [rentEleProcess],
		data() {
			return {
				backFlag: 0 // 1 归还电池
			}
		},
		onLoad(e) {
			this.deviceId = e.deviceId || ''
			if (e.backFlag) {
				this.backFlag = e.backFlag
			}
			this.openDoor()
		},
		onHide() {
			if (this.$ws) {
				this.$ws.close()
			}
		},
		beforeDestroy() {
			if (this.$ws) {
				this.$ws.close()
			}
		},
		methods: {
			// 结果处理
			resultHandle(res) {
				const status = res.data.state
				if (status != 1) {
					// 开门失败
					if (status == 0) {
						this.confirm({
							content: '开门失败',
							showCancel: false
						}).then(res => {
							this.back()
						})
					} else {
						// 更换电池
						console.log(res.data.openType)
						console.log(this.backFlag)
						console.log(res.data.openType == 2 && this.backFlag == 0 && status == 2)
						if (res.data.openType == 2 && this.backFlag == 0 && status == 2) {
							return false
						}
						this.$ws.close()
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.jiazai {
		width: 134upx;
		height: 134upx;
		border-radius: 50%;
		animation: rotate 2s linear infinite;
		transform: rotate(0deg);
	}
</style>
